import type { ColumnDef } from "@tanstack/react-table";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import type { Member } from "@/queries/auth";
import { Badge } from "../ui/badge";
import { MemberDeleteAlertDialog } from "./members-delete-dialog";

export const membersTableColumns: ColumnDef<Member>[] = [
  {
    accessorKey: "name",
    header: "Name",
    size: 600,
    cell: ({ row }) => {
      return (
        <div className="flex items-center gap-2">
          <Avatar className="rounded-lg">
            <AvatarImage src={row.original.user.image as string} alt={row.original.user.name} />
            <AvatarFallback className="rounded-lg font-bold">
              {row.original.user.name.charAt(0).toUpperCase()}
            </AvatarFallback>
          </Avatar>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate">{row.original.user.name}</span>
            <span className="truncate text-xs opacity-50">{row.original.user.email}</span>
          </div>
        </div>
      );
    },
  },
  {
    accessorKey: "role",
    header: "Role",
    size: 100,
    cell: ({ row }) => (
      <Badge variant={row.original.role === "owner" ? "default" : "outline"}>
        {row.original.role.toUpperCase()}
      </Badge>
    ),
  },
  {
    id: "actions",
    size: 100,
    cell: ({ row }) => {
      return (
        <div className="flex items-center justify-end">
          <MemberDeleteAlertDialog
            organizationId={row.original.organizationId}
            memberId={row.original.id}
          />
        </div>
      );
    },
  },
];
